<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店搜索结果-粤亮旅游网</title>
    <!-- 公共部分 -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/hotel-search.css">

    <script src="../js/jquery-3.3.1.js"></script>
    <!-- 引入字体图标 -->
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?rghiog');
            src: url('fonts/icomoon.eot?rghiog#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?rghiog') format('truetype'),
            url('fonts/icomoon.woff?rghiog') format('woff'),
            url('fonts/icomoon.svg?rghiog#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>


<body>
<!-- 快捷导航栏开始 -->
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="collect.html">我的收藏</a>
                    <a href="orders.html" style="padding: 0 10px ">我的订单</a>
                    <a href="#" class="logout">退出</a>
                </li>
                <!--                <li class="fr">-->
                <!--                    <a href="login.html">请登录</a> &nbsp;-->
                <!--                    <a href="register.html" class="style_red">免费注册</a>-->
                <!--                </li>-->
            </ul>
        </div>

    </div>
</section>


<!-- 主体盒子部分--开始 -->
<div class="box w">
    <!-- 提示搜索结果文字 -->
    <div class="tit">
        你的搜索结果
    </div>

    <div class="all-hotel">

    </div>

</div>
<!-- 主体盒子部分--结束 -->

<!-- 尾部 -->
<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>价格保证</h4>
                        <p>同类产品,保证低价</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>退订保障</h4>
                        <p>因特殊情况影响出行,保证退订</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>救援保障</h4>
                        <p>旅途中意外情况,保证援助</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>贴心服务</h4>
                        <p>快速响应,全年无休</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">粤亮简介</a></dd>
                <dd><a href="#">旅游度假资质</a></dd>
                <dd><a href="#">网络地图</a></dd>
                <dd><a href="#">诚聘英才</a></dd>
                <dd><a href="#">知识产权声明</a></dd>
                <dd><a href="#">用户协议</a></dd>
            </dl>
            <dl>
                <dt>加盟合作</dt>
                <dd><a href="#">团购预约</a></dd>
                <dd><a href="#">分销系统</a></dd>
                <dd><a href="#">平台开放</a></dd>
                <dd><a href="#">供应商结盟合作</a></dd>
            </dl>
            <dl>
                <dt>联系我们</dt>
                <dd><a href="#">门店信息</a></dd>
                <dd><a href="#">意见反馈</a></dd>
                <dd><a href="#">不良信息处置方法</a></dd>

            </dl>
            <dl>
                <dt>订购指南</dt>
                <dd><a href="#">门票使用</a></dd>
                <dd><a href="#">常见问题</a></dd>
            </dl>

            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">退货说明</a></dd>
                <dd><a href="#">投诉建议</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>
                    <img src="../images/了解更多.png" alt="">
                    粤亮客户端
                </dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机粤亮 | 友情链接 | 销售联盟 | 粤亮社区 |
                品优购公益 | English Site | Contact U
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</footer>
<script>
    // 获取图片链接
    function getImage(image) {
        return `/common/download?name=${image}`;
    }

    // 页面加载完成后发送AJAX请求
    window.addEventListener("DOMContentLoaded", function () {
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const destination = urlParams.get('destination');

        $.ajax({
            url: `/hotel/search?destination=${destination}`,
            type: "GET",
            success: function (response) {
                const container = document.querySelector(".all-hotel");
                let html = "";
                response.data.forEach(function (hotel) {
                    const image = getImage(hotel.image);
                    html += `
                          <div class="single-hotel" onclick="hotelDetail(${hotel.hid})" style="cursor: pointer">
            <div class="img">
                <img src="${image}" alt="${hotel.hotelName}">
            </div>
            <div class="detailed">
                <div class="name"><a href="#">${hotel.hotelName}</a></div>
                <div class="address">${hotel.hotelAddress}</div>
                <div class="score">
                    <p class="score-left">超棒</p>
                    <div class="score-right">${hotel.score}</div>
                </div>
                <div class="count">共6616条评论</div>
            </div>
            <div class="looking">
                <button class="collection">收藏</button>
                <div class="price">¥${hotel.price}起</div>
                <button class="more">查看详情</button>
            </div>
        </div>
                `
                });
                container.innerHTML = html;
            }
        })
    })

    function hotelDetail(hid) {
        console.log("Querying by ID:", hid);
        $.ajax({
            url: `/hotel/${hid}`,
            type: "GET",
            success: function (response) {
                localStorage.setItem('hotelDetail', JSON.stringify(response.data));
                window.location.href = 'hotel-detail.html?hid='+hid
                // 这里可以处理响应数据并更新页面
            },
            error: function () {
            }
        });

    }

    const logout = document.querySelector('.logout')
    logout.addEventListener('click', function () {
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData');
                    localStorage.removeItem('hotelDetail')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败，请检查用户名和密码");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })
</script>
</body>

</html>